/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 1000px) {
	.pagewrap {
		width: 96%;
	}
	#content {	
	}
	.widget-l,.widget-r{ width:20%;}
    .main{ width:58%; margin-left:1%}

}
/************************************************************************************
smaller than 720
*************************************************************************************/
@media screen and (max-width: 720px) {
	#header {	
	}
	#header h1#logo{ text-align:center}
	#pull{ display:block; display:block;}
	#main-nav ul{ display:none; position:absolute; top:36px; left:0; z-index:10001}
	#main-nav ul li { float:none;background: #282828;
	background: -webkit-gradient(linear, left top, left bottom, from(#4f4f4f), to(#282828));
	background: -moz-linear-gradient(top,  #4f4f4f,  #282828);
	background: linear-gradient(-90deg, #4f4f4f, #282828);-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; border-bottom:1px solid #666}
	#main-nav ul li a{ display:block; color:#CCC;}
	.widget-l,.widget-r{ display:none;}
	.main{ width:100%;}
	.product{ width:48%; padding:1%}
	.tk,.mxh{ display:none}
}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {
	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
	#pull{ display:block; display:block;}
	h1#logo{}
	.product{ width:98%}
	.product img{ width:100%; height:auto}
}

